<template>
    <!-- 查询部分 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="预定人">
        <el-input v-model="formInline.orName" placeholder="请输入预定人" clearable />
        </el-form-item>
        <el-form-item label="订单来源">
        <el-select
            v-model="formInline.orFrom"
            placeholder="请选择订单来源"
            clearable
        >
            <el-option label="===请选择==" value="" />
            <el-option label="APP" value="app端" />
            <el-option label="酒店大堂" value="酒店大堂" />
             <el-option label="电脑端" value="电脑端" />
        </el-select>
        </el-form-item>
        <el-form-item label="入住时间">
        <el-date-picker
            v-model="formInline.orIntime"
            type="date"
            placeholder="请选择入住时间"
            clearable
        />
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="LoadData">查询</el-button>
        </el-form-item>
  </el-form>

    <!-- 显示部分 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="order_SnowId" label="订单编号" width="180" />
    <el-table-column prop="order_From" label="订单来源" width="180" />
    <el-table-column prop="order_UserName" label="预定人" width="180" />
    <el-table-column prop="order_UserPhone" label="预定手机号" width="180" />
    <el-table-column prop="order_InTime" label="入住时间" width="180">
        <template #default="scope">
            {{ moment(scope.row.order_InTime).format("YYYY-MM-DD HH:mm:ss")}}
        </template>
    </el-table-column>
    <el-table-column prop="order_OutTime" label="离店时间" width="180">
          <template #default="scope">
            {{ moment(scope.row.order_OutTime).format("YYYY-MM-DD HH:mm:ss")}}
        </template>
    </el-table-column>
    <el-table-column prop="order_Money" label="支付金额" width="180">
        <template #default="scope">
            {{ scope.row.order_Money.toFixed(1) }}
        </template>
    </el-table-column>
    <el-table-column prop="changeOrder_State" label="状态" width="180" />



    <el-table-column label="操作" width="300" >
        <template #default="scope">
            <el-button type="primary" v-if="scope.row.order_State===3" @click="PayOrder(scope.row.order_SnowId,scope.row.order_Money)">支付</el-button>
        </template>
    </el-table-column>



    
  </el-table>

  <!-- 分页部分 -->
   <table>
        <tr>
            <td> <el-pagination
                    v-model:current-page="pageInfo.pageIndex"
                    v-model:page-size="pageInfo.pageSize"
                    :page-sizes="[1,2,3,4]"
                    :size="size"
                    prev-text="上一页"
                    next-text="下一页"
                    :disabled="false"
                    :background="true"
                    layout="slot"
                    :total="pageInfo.totalCount">
                        <template #default="scope">
                            数据共{{ pageInfo.totalCount }},每页{{ pageInfo.pageSize }}条，当前第{{ pageInfo.pageIndex }}/{{pageInfo.pageCount}}页
                        </template>
                </el-pagination>
            </td>
            <td>
                <el-pagination
                    v-model:current-page="pageInfo.pageIndex"
                    v-model:page-size="pageInfo.pageSize"
                    :page-sizes="[1,2,3,4]"
                    :size="size"
                    prev-text="上一页"
                    next-text="下一页"
                    :disabled="false"
                    :background="true"
                    layout="slot, prev, pager, next"
                    :total="pageInfo.totalCount">
                        <template #default="scope">
                            <el-button @click="pageInfo.pageIndex=1">首页</el-button>
                        </template>
                </el-pagination>
            </td>
            <td>
                   <el-pagination
                    v-model:current-page="pageInfo.pageIndex"
                    v-model:page-size="pageInfo.pageSize"
                    :page-sizes="[1,2,3,4]"
                    :size="size"
                    prev-text="上一页"
                    next-text="下一页"
                    :disabled="false"
                    :background="true"
                    layout="slot,sizes, jumper"
                    :total="pageInfo.totalCount">
                        <template #default="scope">
                            <el-button @click="pageInfo.pageIndex=pageInfo.pageCount">尾页</el-button>
                        </template>
                </el-pagination>
            </td>
        </tr>
   </table>
     
</template>

<script lang="ts" setup>
import axios from 'axios';
import {onMounted, ref,reactive,watch} from 'vue'
import moment from 'moment';
import type { ComponentSize } from 'element-plus'

const size = ref<ComponentSize>('default')

const tableData = ref();


const formInline = reactive({
  orName: '',
  orFrom: '',
  orIntime: '',
})

//响应式数据(保存分页基础信息)
const pageInfo=ref({
    pageIndex:1,
    pageSize:5,
    totalCount:0,
    pageCount:0
});

//通过侦听器侦听分页响应式数据变化   deep:侦听数据类型如果为对象，则需要加入
watch(pageInfo,()=>{
    LoadData();
},{deep:true})

onMounted(()=>{
LoadData();
})

//加载数据
const LoadData=()=>{
    axios.get("api/Orders/ShowOrderInfo",
        {
            params:{
                // API参数：前端参数
                orderName:formInline.orName,
                orderFrom:formInline.orFrom,
                orderIntime:formInline.orIntime,
                pageIndex:pageInfo.value.pageIndex,
                pageSize:pageInfo.value.pageSize
            }
        }
    )
    .then(res=>{
        console.log(res.data.data);
        tableData.value=res.data.data.comm_Data;

        //数据总数、总页数单独保存
        pageInfo.value.totalCount=res.data.data.comm_TotalCount;
        pageInfo.value.pageCount=res.data.data.comm_PageCount;
    })
}

//订单支付(orderId:订单编号，orderMoney:订单金额)
const PayOrder=(orderId:string,orderMoney:number)=>{
    console.log("订单号为："+orderId+"订单金额为："+orderMoney);
    //通过地址栏参数传参  post(API地址,null,{params:{参数名:参数值}})  {params:{参数名:参数值}}:通过地址栏进行参数传递
    axios.post('/api/Orders/PagePay',null,
        {
           params:{
             orderId:orderId,
             orderMoney:orderMoney
           }
        }
    )
    .then(res=>{
        console.log(res.data.code);
        if(res.status==200)
        {
            document.write(res.data);
        }
    })
    
}
</script>



<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>